
<template>
    <Layout>
        <template slot="meta">
            <title>首页</title>
        </template>
        <div class="api-index">
            <h3 class="tc title">
                <img src="/favicon.png" width="26" height="26" alt="">
                <a :href="tabs.filter(el => el.href=='/api-docs')[0].href" target="_blank" rel="noopener noreferrer">{{ tabs.filter(el => el.href=='/api-docs')[0].label }}</a>
            </h3>
            <div class="panels" v-for="(weather, index) in weathers" :key="index">
                <div class="location" v-if="weather && weather.location">{{weather.location.name}}市</div>
                <div class="weather" v-if="weather && weather.now">{{weather.now.text}}</div>
                <div class="temperature" v-if="weather && weather.now">{{weather.now.temperature}}℃</div>
                <div class="last_update" v-if="weather && weather.last_update">{{new Date(weather.last_update).toLocaleDateString()}}</div>
            </div>
            <Tabs></Tabs>
            <!-- <div class="add-city" @click="addCity()">+</div> -->
        </div>
    </Layout>
</template>
<script>
</script>
<style lang="less" scoped>
.api-index {
    font-size: 12px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title {
        font-size: 32px;
        margin-bottom: 30px;
        a {
            font-size: 32px;
        }
    }
    .tabs {
        font-size: 16px;
        margin-top: 50px ;
        justify-content: center;
        .tabs-item {
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .add-city {
        font-size: 36px;
        margin-top: 10px;
        cursor: pointer;
    }
    .panels {
        width: 50%;
        max-width: 600px;
        min-width: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 300px;
        color: #fff;
        flex-direction: column;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.7);
        // background-image: linear-gradient(45deg, #ccc, yellowgreen);
        background: linear-gradient(-45deg, #496eaa, #944fa8, orange, yellowgreen, #944fa8, #496eaa);
        background-size:1400% 300%;
        font-size: 18px;
        animation:bgMove 30s ease infinite;
        -webkit-animation: bgMove 30s ease infinite;
        -moz-animation: bgMove 30s ease infinite;
    }
    @keyframes bgMove {
        0% {
            background-position: 0% 0%; }
        25% {
            background-position: 25% 100%; }
        50% {
            background-position: 50% 100%; }
        75% {
            background-position: 75% 100%; }
        100% {
            background-position: 100% 0%; 
        }
    }
    .panels .weather{
        font-size: 48px;
        margin: 30px 0;
    }
    .panels .last_update {
        margin-top: 20px;
    }
}
</style>